<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta name="format-detection" content="telephone=no" />
		<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
		
		<script type="text/javascript" src="js/lib/jquery-2.0.2.js"></script>
		<script type="text/javascript" src="js/lib/jquery.mobile-1.3.1.js"></script>
		<link type="text/css" rel="stylesheet" href="css/jquery.mobile-1.3.1.css">
	</head>
	<script type="text/javascript">
		$(function() {
			$('#testbutton').click(function() {
				$('#pageContent').show(200);
			});
			$('#testbutton2').click(function() {
				$('#pageContent').hide(200);
			});
		});
	</script>
	<body>
		<div data-role="content">
		    <ul data-role="listview" data-inset="true">
		        <li data-role="list-divider">TEST</li>
		        <li>
		        	<label for="test">文本输入框</label>
		        	<input type="text" name="test" id="test">
	        	</li>
		        <li>
					<label for="test2">文本输入框</label>
		        	<input type="text" name="test2" id="test2">
				</li>
		        <li>
					<label for="test3">文本输入框</label>
		        	<input type="text" name="test3" id="test3">
				</li>
		        <li>
					<label for="test4">文本输入框</label>
		        	<input type="text" name="test4" id="test4">
				</li>
		        <li><button id="testbutton">查詢</button></li>
		        <li><button id="testbutton2">關閉</button></li>
		    </ul>
		</div>
		<div id="pageContent" data-role="content" style="display: none;">
			<table data-role="table" data-mode="columntoggle" class="ui-responsive table-stroke" >
				<thead>
					<tr>
						<th>test</th>
						<th>test1</th>
						<th>test2</th>
						<th>test3</th>
						<th>test4</th>
						<th>test5</th>
						<th>test6</th>
						<th>test7</th>
						<th>test</th>
						<th>test1</th>
						<th>test2</th>
						<th>test3</th>
						<th>test4</th>
						<th>test5</th>
						<th>test6</th>
						<th>test7</th>
					</tr>
				</thead>
				<tbody style="overflow-y: scroll;">
					<tr>
						<td>test</td>	
						<td>test1</td>	
						<td>test2</td>
						<td>test3</td>
						<td>test4</td>	
						<td>test5</td>	
						<td>test6</td>	
						<td>test7</td>
						<td>test</td>
						<td>test1</td>	
						<td>test2</td>
						<td>test3</td>	
						<td>test4</td>	
						<td>test5</td>	
						<td>test6</td>	
						<td>test7</td>
					</tr>
				</tbody>
			</table>
		</div>
	</body>
</html>